<template>
  <a-layout>
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <p>
        <a-button type="primary" ghost @click="insert"> 新增 </a-button>
      </p>
      <a-table
        :columns="columns"
        :data-source="ebooks"
        :row-key="(record) => record.id"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar" style="width: 50px" />
        </template>
        <template v-slot:action="{ text: recoder }">
          <a-space size="small">
            <a-button type="primary" @click="edit(recoder)"> 编辑 </a-button>
            <a-button type="danger" @click="dele(recoder.id)"> 删除 </a-button>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>
  <a-modal
    title="电子书表单"
    v-model:visible="modelVisible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-form :model="book" :label-col="{ span: 6 }">
      <a-form-item label="封面">
        <a-input v-model:value="book.cover" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="book.name" />
      </a-form-item>
      <a-form-item label="分类一">
        <a-input v-model:value="book.category1Id" />
      </a-form-item>
      <a-form-item label="分类二">
        <a-input v-model:value="book.category2Id" />
      </a-form-item>
      <a-form-item label="文档数">
        <a-input v-model:value="book.description" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { defineComponent, onMounted, ref, createVNode } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";
import axios from "axios";

export default defineComponent({
  name: "Home",
  setup() {
    const ebooks = ref();
    const pagination = ref({
      current: 1,
      pageSize: 3,
      total: 0,
    });
    const loading = ref(false);

    const columns = [
      {
        title: "封面",
        dataIndex: "cover",
        slots: { customRender: "cover" },
      },
      {
        title: "名称",
        dataIndex: "name",
      },
      {
        title: "分类一",
        key: "category1Id",
        dataIndex: "category1Id",
      },
      {
        title: "分类二",
        key: "category2Id",
        dataIndex: "category2Id",
      },
      {
        title: "文档数",
        dataIndex: "docCount",
      },
      {
        title: "阅读数",
        dataIndex: "viewCount",
      },
      {
        title: "点赞数",
        dataIndex: "voteCount",
      },
      {
        title: "Action",
        key: "action",
        slots: { customRender: "action" },
      },
    ];

    const handleQuery = (params) => {
      loading.value = true;
      axios.post("/ebook/list", params).then((res) => {
        loading.value = false;
        const data = res.data;
        ebooks.value = data.content.list;

        pagination.value.current = params.page;
        pagination.value.total = data.content.total;
      });
    };

    const handleTableChange = (pagination) => {
      console.log("自带分页参数:" + pagination);
      handleQuery({
        name: "java",
        page: pagination.current,
        size: pagination.pageSize,
      });
    };
    // 表单
    const book = ref();
    const modelVisible = ref(false);
    const confirmLoading = ref(false);
    const handleOk = () => {
      confirmLoading.value = true;
      axios.post("/ebook/save", book.value).then((res) => {
        const data = res.data;
        if (data.success) {
          modelVisible.value = false;
          confirmLoading.value = false;

          handleQuery({
            name: "java",
            page: pagination.value.current,
            size: pagination.value.pageSize,
          });
        }
      });
    };
    // 编辑
    const edit = (recoder) => {
      modelVisible.value = true;
      book.value = recoder;
    };

    // 新增
    const insert = () => {
      modelVisible.value = true;
      book.value = {};
    };
    // 删除
    const dele = (id) => {
      Modal.confirm({
        title: "Are you sure delete this task?",
        icon: createVNode(ExclamationCircleOutlined),
        content: "Some descriptions",
        okText: "Yes",
        okType: "danger",
        cancelText: "No",
        onOk() {
          axios.post("/ebook/delete/" + id).then((res) => {
            const data = res.data;
            if (data.success) {
              message.success("Click on Yes");

              handleQuery({
                name: "java",
                page: pagination.value.current,
                size: pagination.value.pageSize,
              });
            }
          });
        },
        onCancel() {
          message.error("Click on No");
        },
      });
    };

    onMounted(() => {
      handleQuery({
        name: "java",
        page: 1,
        size: pagination.value.pageSize,
      });
    });

    return {
      ebooks,
      pagination,
      columns,
      loading,
      handleTableChange,

      edit,
      book,
      modelVisible,
      confirmLoading,
      handleOk,

      insert,
      dele,
    };
  },
});
</script>
